<template>
  <view class="content">
    <chart-title title="司机状态" no-more />

    <view class="flex-row align-center">
      <view class="charts-box-ring">
        <qiun-data-charts
          class="charts-box-ring"
          type="ring"
          :opts="options"
          :chart-data="charData"
          :canvas2d="true"
          canvas-id="tBaBaDriverStatusCharts"
        />
      </view>
      <view class="flex-item margin-left-15">
        <view v-for="(item,index) in labels" :key="index" class="label margin-bottom-10">
          <view class="flex-row align-center">
            <view class="label-block" :style="{background:item.color}" />
            <text class="text-20 color-t1 text-bold margin-left-10">{{ item.name }}</text>
            <text class="text-32 color-t1 text-bold margin-left-40">{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChartTitle from '../chart-title/chart-title'
import colors from '@/common/colors'
import options from './index'
import { fetchDriverSummery } from '@/common/api/statistics.js'
import request from '@/common/api/request'
export default {
  name: 'DriverStatusModel',
  components: {
    ChartTitle
  },
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      charData: {
        series: [
          {
            data: [
              {
                name: '在岗',
                value: 0,
                color: colors.colorPrimary
              },
              {
                name: '出勤',
                value: 0,
                color: colors.colorSuccess
              },
              {
                name: '休假',
                value: 0,
                color: colors.colorWarning
              }
            ]
          }
        ]
      },
      options
    }
  },
  computed: {
    labels() {
      return this.charData.series[0].data
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const [err, res] = await fetchDriverSummery({
        startTime: this.startTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59'
      })
      if (!request.errorCheck(err, res)) return false
      const data = res.data.data
      this.charData = {
        series: [
          {
            data: [
              {
                name: '在岗',
                value: data.onDutyCount,
                color: colors.colorPrimary

              },
              {
                name: '出勤',
                value: data.travelingCount,
                color: colors.colorSuccess

              },
              {
                name: '休假',
                value: data.vacationCount,
                color: colors.colorWarning
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../index";
</style>
